<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>
    <script src="../avalon.js"></script>
    <script type="text/javascript">
        require(['dropdown/avalon.dropdown.js'], function() {
            avalon.ready(function() {
                var dropdownVm = avalon.define('dropdown', function(vm) {
                    vm.$skipArray = ['opts'];
                    vm.opts = {
                        data: []
                    };
                    vm.source = [];
                    vm.value = '1';
                });

                dropdownVm.opts.$source = dropdownVm.source;
                avalon.scan();
                setTimeout(function() {
                    dropdownVm.source.pushArray([
                        {
                            value: '1',
                            label: '1'
                        }, {
                            value: '2',
                            label: '2'
                        }, {
                            label: 'group1',
                            options: [
                                {
                                    value: 'false',
                                    label: 'false'
                                },
                                {
                                    value: 'null',
                                    label: 'null'
                                }
                            ]
                        }, {
                            label: 'group2',
                            options: [
                                {
                                    value: 'disabled',
                                    label: 'disabled',
                                    enable: false
                                }
                            ]
                        }
                    ])
                }, 3000)
            });
        });
    </script>
    <script src="../highlight/shCore.js"></script>
</head>
<body>
    <div class="wrapper">
        <div ms-controller="dropdown">
            <h2>dropdown（下拉框）</h2>
            <p>异步渲染组件的选项</p>
            <select ms-widget="dropdown,xxx,opts"
                    ms-duplex="value">
            </select>
            <p>{{value}}</p>
        </div>
        <pre class="brush:html;gutter:false;toolbar:false;" ms-skip>
        &lt;!DOCTYPE html&gt;
        &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;&lt;/title&gt;
            &lt;meta charset="UTF-8"&gt;
            &lt;meta name="viewport" content="width=device-width"&gt;
            &lt;link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/&gt;
            &lt;script src="../avalon.js"&gt;&lt;/script&gt;
            &lt;script type="text/javascript"&gt;
                require('dropdown/avalon.dropdown.js', function() &#123;
                    avalon.ready(function() &#123;
                        var dropdownVm = avalon.define('dropdown', function(vm) &#123;
                            vm.$skipArray = ['opts'];
                            vm.opts = &#123;
                                data: []
                            &#125;;
                            vm.source = [];
                            vm.value = '1';
                        &#125;);

                        dropdownVm.opts.$source = dropdownVm.source;
                        avalon.scan();
                        setTimeout(function() &#123;
                            dropdownVm.source.pushArray([
                                &#123;
                                    value: '1',
                                    label: '1'
                                &#125;, &#123;
                                    value: '2',
                                    label: '2'
                                &#125;, &#123;
                                    label: 'group1',
                                    options: [
                                        &#123;
                                            value: 'false',
                                            label: 'false'
                                        &#125;,
                                        &#123;
                                            value: 'null',
                                            label: 'null'
                                        &#125;
                                    ]
                                &#125;, &#123;
                                    label: 'group2',
                                    options: [
                                        &#123;
                                            value: 'disabled',
                                            label: 'disabled',
                                            enable: false
                                        &#125;
                                    ]
                                &#125;
                            ])
                        &#125;, 3000)
                    &#125;);
                &#125;);
            &lt;/script&gt;
            &lt;script src="../highlight/shCore.js"&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;div class="wrapper"&gt;
                &lt;div ms-controller="dropdown"&gt;
                    &lt;h2&gt;dropdown（下拉框）&lt;/h2&gt;
                    &lt;p&gt;使用option配置并使用duplex绑定&lt;/p&gt;
                    &lt;select ms-widget="dropdown,$,opts"
                            ms-duplex="value"&gt;
                    &lt;/select&gt;
                    &lt;p&gt;&#123;&#123;value&#125;&#125;&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/body&gt;
        &lt;/html&gt;
        </pre>
    </div>
</body>
</html>